<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件派遣(EventTarget dispatchEvent)</title>
  <!-- 
  在JavaScript中，dispatchEvent 方法用于手动触发一个事件。这对于模拟用户交互、测试或在程序中触发特定事件非常有用。
  一、基本概念
  - 事件：事件是用户与网页交互的结果，例如点击、键入、加载等。JavaScript 允许开发者为这些事件注册处理程序。
  - dispatchEvent：dispatchEvent 方法用于在指定的事件目标上触发一个事件。

  二、创建和触发事件
  1. 创建事件：
    - 使用 Event 构造函数可以创建一个新的事件对象。可以指定事件的类型和是否为可冒泡事件。
    const myEvent = new Event('myCustomEvent', {
      bubbles: true, // 事件是否可以冒泡
      cancelable: true // 事件是否可以取消
    });
  2. 触发事件：
    - 使用 dispatchEvent 方法在目标元素上触发事件。
    const button = document.getElementById('myButton');

    // 添加事件监听器
    button.addEventListener('myCustomEvent', function(event) {
      console.log('自定义事件被触发！');
    });

    // 创建并触发事件
    const myEvent = new Event('myCustomEvent');
    button.dispatchEvent(myEvent); // 输出: 自定义事件被触发！

  三、事件的类型
  - 标准事件：如 click、keydown、keyup 等，可以直接使用。
  - 自定义事件：可以创建自定义事件，适用于特定的应用场景。

  四、事件的特性
  - 冒泡和捕获：事件可以在 DOM 树中冒泡，或者在捕获阶段被捕获。通过设置事件的选项（如 bubbles），可以控制事件的传播方式。
  - 可取消性：通过设置 cancelable 选项，事件可以被取消，阻止默认行为。

  五、总结
  - dispatchEvent 方法用于手动触发事件，可以创建和触发标准事件或自定义事件。
  - 通过事件对象，可以控制事件的特性，如冒泡和可取消性。
  - 理解 dispatchEvent 的使用，对于模拟用户交互和实现复杂的事件处理逻辑非常重要。
   -->
</head>
<body>

  <h3>获取dispatchEvent</h3>
  <button onclick="emitEvent(event)">发出事件</button>
  <button onclick="onEvent(event)">监听事件</button>

  <script>
    function emitEvent(event) {
      const button = document.querySelector('button');
      const myEvent = new Event('myCustomEvent', {
        bubbles: true, // 事件是否可以冒泡
        cancelable: true, // 事件是否可以取消
        aaa: 1231
      });
      window.dispatchEvent(myEvent); // 输出: 自定义事件被触发！
    }

    function onEvent(event) {
      window.addEventListener('myCustomEvent', function(event) {
        console.log('自定义事件被触发！', event);
      });
    }
  </script>
  </script>
  
</body>
</html>